<template>
  <div id="store-list">
    <el-card class="mg-b-10">
      <el-row>
        <el-col :span="5" class="setDate">
          <el-radio-group
            v-model="checkedDates"
            fill="#e2211c"
            size="mini"
            text-color="#fff"
            @change="selectDate"
          >
            <el-radio-button v-for="(date ,index) in dates" :label="date" :key="index">{{date}}</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="5">
          <el-select
            v-model="storeTypeVal"
            placeholder="选择门店类型"
            class="select-prefix"
            size="mini"
            clearable
            filterable
          >
            <template slot="prefix">
              <span class="prefixSlot">门店类型</span>
            </template>
            <el-option
              v-for="(item, index) in $Options.storeTypes"
              :label="item.label"
              :value="item.value"
              :key="index"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select
            v-model="provinceAreaVal"
            placeholder="选择区域"
            class="select-prefix"
            size="mini"
            clearable
            filterable
          >
            <template slot="prefix">
              <span class="prefixSlot">选择区域</span>
            </template>
            <el-option
              v-for="(item, index) in provinceArea"
              :label="item.name"
              :value="item.id"
              :key="index"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2" class="col_float_right">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="handleChangeSearch"
          >查 询</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="mg-b-10">
      <div class="card-header">
        <h2>门店详情</h2>
        <el-button size="mini" type="primary" icon="iconfont excel" @click="downLoadStorekeys">导出</el-button>
      </div>
      <el-table
        stripe
        :data="storeDetailList.list"
        border
        :height="storeDetailList.total > 0 ? 340 : 'auto' "
      >
        <el-table-column label="门店名称" prop="storeName"></el-table-column>
        <el-table-column label="订单数" prop="totalOrderCount"></el-table-column>
        <el-table-column label="商品销量" prop="totalSaleQuantity"></el-table-column>
        <el-table-column label="销售额" prop="totalSaleAmount"></el-table-column>
        <el-table-column label="金额环比" prop="totalSaleAmountGrowthRate">
          <template slot-scope="scope">
            <span
              :class="scope.row.totalSaleAmountGrowthRate > 0 ? 'up':'down'"
            >{{ scope.row.totalSaleAmountGrowthRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="日均销售额" prop="avgSaleAmount"></el-table-column>
        <el-table-column label="连带率" prop="jointRate"></el-table-column>
        <el-table-column label="客单价" prop="perCustomerPrice"></el-table-column>
        <el-table-column label="件单价" prop="perUnitPrice"></el-table-column>
        <el-table-column label="SKU动销率" prop="skuSaleStockRate"></el-table-column>
        <el-table-column label="门店评级" prop="gradePoint"></el-table-column>
        <el-table-column label="上期评级" prop="lastGradePoint"></el-table-column>
      </el-table>

      <page
        v-if="storeDetailList.total"
        :total="storeDetailList.total"
        :page="storeDetailList.page"
        id="storeDetailList"
        :size="storeDetailList.size"
        @handlepagechange="handlePageChange"
        @handleSizeChange="handleSizeChange"
      ></page>
    </el-card>

    <el-row class="saleState mg-b-10">
      <el-col :span="10" class="left">
        <el-card>
          <div class="card-header">
            <h2>销售较差品牌</h2>
            <el-button size="mini" type="primary" icon="iconfont excel" @click="downLoadPoorsale">导出</el-button>
          </div>
          <el-table stripe :data="brandSales.list"   border :height="brandSales.total > 0 ? 340 : 'auto'" >
            <el-table-column label="品牌名称" prop="brandName" show-overflow-tooltip></el-table-column>
            <el-table-column label="销量" prop="totalSaleQuantity" width="50"></el-table-column>
            <el-table-column label="销售额" prop="totalSaleAmount"></el-table-column>
            <el-table-column label="销量占比">
              <template slot-scope="scope">
                <span>{{ scope.row.saleQuantityRate }}%</span>
              </template>
            </el-table-column>
            <el-table-column label="库存" prop="totalStockQuantity" width="60"></el-table-column>
            <el-table-column label="日均销量" width="70" prop="avgSaleQuantity"></el-table-column>
          </el-table>
          <page
            v-if="brandSales.total"
            :total="brandSales.total"
            :page="brandSales.page"
            id="brandSales"
            :size="brandSales.size"
            @handlepagechange="handlePageChange"
            @handleSizeChange="handleSizeChange"
            :pagerCount="5"
            layout="sizes,prev, pager, next"
          ></page>
        </el-card>
      </el-col>
      <el-col :span="14" class="right">
        <el-card>
          <div class="card-header">
            <h2>销量为0商品</h2>
            <el-button size="mini" type="primary" icon="iconfont excel" @click="downLoadZerosale">导出</el-button>
          </div>
          <el-table stripe :data="goodsSales.list" border  :height="goodsSales.list.length > 0 ? 340 : 'auto'">
            <el-table-column label="品牌名称" prop="brandName"></el-table-column>
            <el-table-column label="商品名称" prop="goodsName"></el-table-column>
            <el-table-column label="款号" prop="goodsCode"></el-table-column>
            <el-table-column label="在售门店" prop="totalSellingStoreCount" width="80"></el-table-column>
            <el-table-column label="库存" prop="totalStockQuantity"  width="60"></el-table-column>
          </el-table>
          <page
            v-if="goodsSales.total"
            :total="goodsSales.total"
            :page="goodsSales.page"
            id="goodsSales"
            :size="goodsSales.size"
            @handlepagechange="handlePageChange"
            @handleSizeChange="handleSizeChange"
            :pagerCount="5"
            layout="total,sizes,prev, pager, next"
          ></page>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echartsTpl from "../../commonComponents/echarts"
import { getDay } from "../../../api/commonJs/getDays"
import page from '../../commonComponents/page'
import $options from "../../../api/json/selectOptions"

const dateOptions = ['近7天', '近15天', '近30天'];
export default {
  components: { echartsTpl, page },
  data() {
    return {
      checkedDates: dateOptions[0],
      dateScope: "",//选择日期范围
      dates: dateOptions,
      provinceArea: [{
        id: "",
        name: "全部区域"
      }, {
        id: 370000,
        name: "山东省"
      }, {
        id: 110100,
        name: "北京市"
      }, {
        id: 120100,
        name: "天津市"
      }, {
        id: 130000,
        name: "河北省"
      }],
      provinceAreaVal: "", //选择区域
      storeTypeVal: 0, //选择店铺类型
      areaList: [],
      tableData: [],
      storeDetailList: {
        list: [],
        page: 1,
        size: 10,
        total: 0
      },
      brandSales: {
        list: [],
        page: 1,
        size: 10,
        total: 0
      },
      goodsSales: {
        list: [],
        page: 1,
        size: 10,
        total: 0
      },
      downUrl: process.env.BASE_API + '/youbao/report/api/download/storeview' 
    };
  },
  mounted() {
    this.handleSelectDays(this.checkedDates);
    this.handlePageData()
  },
  methods: {
    /** 获取店铺列表*/
    getStoreListByGroup() {
      this.$server.systemControlApi.getStoreListByGroup().then(res => {
        this.storeList = res.data
      })
    },
    /**选中日期*/
    selectDate(e) {
      this.handleSelectDays(e);
      this.handlePageData()
    },
    /**搜索*/
    handleChangeSearch() {
      this.handlePageData()
    }, 
    /**日期范围处理*/
    handleSelectDays(val) {
      switch (val) {
        case dateOptions[0]:
          this.dateScope = [new Date(getDay(-7)), new Date(getDay(-1))];
          break;
        case dateOptions[1]:
          this.dateScope = [new Date(getDay(-15)), new Date(getDay(-1))];
          break;
        case dateOptions[2]:
          this.dateScope = [new Date(getDay(-30)), new Date(getDay(-1))];
          break;
      }
    },
    /**输出params*/
    getParams(){
      let { dateScope, provinceAreaVal, storeTypeVal } = this,
        dateFrom = this.formate(dateScope[0].getTime(), "yyyyMMdd"),
        dateTo = this.formate(dateScope[1].getTime(), "yyyyMMdd");
      let params = {
        dateFrom: Number(dateFrom), //开始时间
        dateTo: Number(dateTo),//结束时间
        provinceCode: provinceAreaVal == '' ? -1 : provinceAreaVal,//省代码
        storeType: storeTypeVal == 0 ? -1 : storeTypeVal //门店类型
      }
      return params;
    },
    /**初始化数据*/
    handlePageData(cb, loadData) {
      let params = this.getParams();
      if (loadData) {
        if (loadData == 'storeDetailList') {
          this.getStorekeys(params).then(res => {
            cb && cb()
          }).catch(err => {
            cb && cb()
          })
        } else if(loadData == 'brandSales'){
          this.getPoorsale(params).then(res => {
            cb && cb()
          }).catch(err => {
            cb && cb()
          })
        }else if(loadData == 'goodsSales'){
           this.getZerosale(params).then(res => {
            cb && cb()
          }).catch(err => {
            cb && cb()
          })
        }
      } else {
        Promise.all([this.getStorekeys(params), this.getPoorsale(params), this.getZerosale(params)]).then(res => {
          cb && cb()
        }).catch(err => {
          cb && cb()
        })
      }
    },
    /** 分页Page*/
    handlePageChange(res) {
      let id = res.id,
        page = res.page;
      this.$set(this[id], "page", page)
      this.handlePageData(()=>{},id)
    },
    /** 改变size*/
    handleSizeChange(res) {
      let id = res.id,
        size = res.size;
      this.$set(this[id], "size", size)
      this.handlePageData(()=>{},id)
    },
    /**门店详情*/
    getStorekeys(params) {
      let { storeDetailList } = this;
      return new Promise((reslove, reject) => {
        let pageInfo = {
          page: storeDetailList.page,
          size: storeDetailList.size
        }
        this.$server.salesExhibitionApi.getStorekeys(pageInfo, params).then(res => {
          this.$set(this.storeDetailList, 'list', res.data);
          this.$set(this.storeDetailList, 'total', res.total);

          reslove(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /** 销售较差品牌  */
    getPoorsale(params) {
      let { brandSales } = this;
      return new Promise((reslove, reject) => {
        let pageInfo = {
          page: brandSales.page,
          size: brandSales.size
        }
        this.$server.salesExhibitionApi.getPoorsale(pageInfo, params).then(res => {

          this.$set(this.brandSales, 'list', res.data);
          this.$set(this.brandSales, 'total', res.total);

          reslove(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /**销量为0商品*/
    getZerosale(params) {
      let { goodsSales } = this;
      return new Promise((reslove, reject) => {

         let pageInfo = {
          page: goodsSales.page,
          size: goodsSales.size
        }

        this.$server.salesExhibitionApi.getZerosale(pageInfo,params).then(res => {
          this.$set(this.goodsSales, 'list', res.data);
          this.$set(this.goodsSales, 'total', res.total);
          reslove(res.data)
        }).catch(err => {
          reject(err)
        })
      })
    },
    /** 门店详情导出*/
    downLoadStorekeys(){
      let params = this.getParams();
       try {
            let obj= {
                url: this.downUrl + '/keyindex/excel',
                name: '门店详情' +params.dateFrom + '-' + params.dateTo,
                params: params
            }
            this.$server.excelApi.downLoadExcelPost(obj)
        }catch(err) {this.$paramsError(err)}
    },
    /** 销售较差品牌数据导出*/
    downLoadPoorsale(){
      let params = this.getParams();
       try {
            let obj= {
                url: this.downUrl + '/poorsale/excel',
                name: '销售较差品牌' +params.dateFrom + '-' + params.dateTo,
                params: params
            }
            this.$server.excelApi.downLoadExcelPost(obj)
        }catch(err) {this.$paramsError(err)}
    },
    /** 销售为零商品数据导出 */ 
    downLoadZerosale(){
      let params = this.getParams();
       try {
            let obj= {
                url: this.downUrl + '/zerosale/excel',
                name: '销售为零商品' +params.dateFrom + '-' + params.dateTo,
                params: params
            }
            this.$server.excelApi.downLoadExcelPost(obj)
        }catch(err) {this.$paramsError(err)}
    },
  }
};
</script>
<style lang="less" scoped>
.storeInfo,
.dateTitle {
  font-size: 12px;
  color: #666666;
}
.storeInfo:not(:first-child) {
  margin-left: 10px;
}
.setDate {
  display: flex;
  align-items: center;
}
.dateTitle {
  margin-right: 10px;
}
.saleState {
  .left {
    padding-right: 5px;
  }
  .right {
    padding-left: 5px;
  }
}
.card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  h2 {
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }
}

.up {
  color: #e60012;
}
.down {
  color: #22ce00;
}
</style>